<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
	*{
		padding: 0;
		margin: 0;
	}
	.father{
		width: 500px;
		/*height: 400px;*/

	}
	.box1{
		width: 100px;
		height: 100px;
		background-color:red;
		float: left;
	}
	.box2{
		width: 100px;
		height: 300px;
		background-color:green;
		float: left;
	}
	.box3{
		width: 100px;
		height: 100px;
		background-color:blue;
		float: left;
	}
	.father2{
		width: 600px;
		height: 200px;
		background-color: yellow;
	}
	.clearfix{
		clear:both;
	}
	</style>
</head>
<body>
	
		<div class="father">
			<div class="box1">1</div>
			<div class="box2">2</div>
			<div class="box3">3</div>
			<!-- 内墙法 -->
			<div class="clearfix"></div>


		</div>
	

	<div class="father2"></div>

	
</body>
</html>